<template>
  <view>
	  <div>请选择中意的老师：</div>
      <picker :value="index" :range="optionss" mode="selector" @change="bindPickerChange">
         <view class="picker">
           当前选择：{{optionss[index]}}
         </view>
		 </picker>
    <view class="goods-nav">
      <uni-goods-nav :fill="true" :options="options" :buttonGroup="buttonGroup" @click="onClick" @buttonClick="buttonClick" />
    </view>
  </view>
</template>
<script>
import { mapState, mapMutations,mapGetters } from 'vuex';

export default {
  computed: {
    ...mapState('m-cart', []),
	...mapGetters('m-cart',['total'])
  },
  watch:{//监听器
	  total:{
		  handler(newval){
			  const findResult=this.options.find(x=>x.text==='预约')
			  if(findResult){
			  			  findResult.info=newval
			  }
		  },
		  immediate:true
	  }
  },
  data() {
    return {
		index:0,
		pname: '',
		price:'',
		id:'',
		from:'',
      optionss: [
              '张三',
              '李四',
              '王二'
            ],
      selectedOption: '', 
				options:[{
					icon:'headphones',
					text:'客服'
				},{
					icon:'cart',
					text:'预约',
					info:0,
					infoBackgroundColor:'#007aff',
					infoColor:"red"
				}],
				buttonGroup:[{
					text:'加入预约',
					backgroundColor:'#ff0000',
				    color:'#fff'
				}]
			};
		},
		methods:{
			...mapMutations('m-cart',['addTocart']),
			onClick(e){
				if(e.content.text=='预约'){
					uni.switchTab({
						url:'/pages/cate/cate'
					})
				}
				if(e.content.text==='客服'){
					uni.redirectTo({
						url:'/pages/chat/chat'
					})
				}
			},
			buttonClick(e){
				if(e.content.text==='加入预约'){
					const goods={
						goods_a:this.optionss[this.index],
						goods_name:this.pname,
						goods_count:1,
						goods_from:this.from,
						goods_price:this.price,
						goods_selected:true,
						goods_id:this.id
					}
					this.addTocart(goods)
				}
			},
			bindPickerChange(e){
				      this.index=e.detail.value
			}
		},
		onLoad(options){
			this.pname=options.goods_name
			this.price=options.price
			this.id=options.goods_id
			this.from=options.goods_from
		}
	}
</script>

<style lang="scss">
.goods-nav{
	position: fixed;
	bottom:0;
	left:0;
	width: 100%;
}
</style>
